<template lang="pug">
  div.table-empty
    s-table(
      ref="table"
      v-loading="loading"
      req-method="get"
      reqUrl="/web/materials/list"
      :column="classesColumn"
      :filterProps="{fields: searchConfig}"
      :queryPropsParams="{areaId: curArea.areaId}"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large"  @click="actionHandle({}, 'add')" round) 新增
        el-button.btn-primary-box(size="large"  @click="actionHandle({}, 'receive')" round) 领用
      template(slot="category" slot-scope="text, scope") {{scope.category.name}}
      template(slot="consumable" slot-scope="text, scope") {{text ? '是' : '否'}}
      template(slot="action" slot-scope="text, scope")
        template
          el-popconfirm(
            title="确定删除该物资吗?"
            @confirm="() => actionHandle(scope, 'delete')"
            @onConfirm="() => actionHandle(scope, 'delete')"
          )
            el-link(slot="reference" type="danger") 删除
    add-drawer(v-if="addVisible" :visible.sync="addVisible" @getList="() => refreshTable(true)")
    receive-drawer(v-if="receiveVisible" :visible.sync="receiveVisible" type="receive" @getList="() => refreshTable(true)")
</template>
<script>
import { mapGetters } from 'vuex'
import { column } from './config'
import { deleteMaterial, getCategory } from './api'
import AddDrawer from './components/addDrawer'
import ReceiveDrawer from '../borrow/components/addDrawer'
export default {
  components: {
    AddDrawer,
    ReceiveDrawer
  },
  data () {
    return {
      classesColumn: column,
      loading: false,
      categoryList: [],

      addVisible: false,

      receiveVisible: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      const { categoryList } = this
      return [
        {
          label: '物资分类',
          key: 'cid',
          type: 'select',
          fieldProps: {
            options: categoryList,
            props: { value: 'id', label: 'name' }
          }
        }
      ]
    }
  },
  async created () {
    const categoryList = await getCategory() || []
    this.categoryList = categoryList
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },

    actionHandle (row, type = 'unbind') {
      console.log(type)
      if (type === 'add') {
        this.addVisible = true
        return
      }
      if (type === 'delete') {
        deleteMaterial({ id: row.id }).then(res => {
          this.refreshTable()
        })
      }
      if (type === 'receive') {
        this.receiveVisible = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.video{
  width: 100%;
  height: 560px
}
.close{
  margin-top: 20px;
}
</style>
